<template>
  <div class="full-box line02">
    <v-chart className="chart" :option="chartOption" autoresize/>
  </div>
</template>

<script>
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import vChart from "vue-echarts";
import {getBaseChartOption} from "@/package/widget/chart/01base/util";
import {graphic} from "echarts";

export default {
  name: 'pie01',
  cnName: '基础饼图',
  mixins: [refreshMixin],
  components: {vChart},
  data() {
    return {
      chartOption: {}
    }
  },
  methods: {
    loadDataOk() {
      const attribute = this.option.attribute
      const aseries = attribute.series
      let opt = getBaseChartOption(attribute, false)

      let data = JSON.parse(JSON.stringify(this.cptData))

      data.forEach((item, index) => {
        item.itemStyle = {
          ...aseries.itemStyle
        }
        const color = attribute.color[index % attribute.color.length]
        if(!aseries.itemStyle.shadowColor) {
          item.itemStyle.shadowColor = color
        }
      })

      // 渐变色
      if(attribute.colorRange.show) {
        const colors = attribute.colorRange.colors
        const len = colors.length
        if(len > 0) {
          data.forEach((item, index) => {
            const color = colors[index % len]

            item.itemStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: color[0] },
              { offset: 0.4, color: color[1] },
              { offset: 1, color: color[2] }
            ])

            if(!aseries.itemStyle.shadowColor) {
              item.itemStyle.shadowColor = color[2]
            }
          })
        }
      }

      if(attribute.gap.show) {
        const old = [].concat(data)
        data = []
        const gap = {
          name: '',
          value: attribute.gap.value,
          label: {
            show: false
          },
          itemStyle: {
            color: 'rgba(0, 0, 0, 0)',
          }
        }
        old.forEach(item => {
          data.push(item)
          data.push(gap)
        })
      }

      const series = [{
        ...aseries,
        type: 'pie',
        data: data
      }]


      opt.series = series

      this.chartOption = opt
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
  mounted() {
  }
}
</script>

